<template>
  <div class="layout-col bs flex1">
    <div class="ww100 flex-bc plr12 ptb8 bs2">
      <div class="flex-sc">
        <div class="h30"><img class="hh100" src="@/assets/images/tibi-ico.png" /></div>
        <span class="f15 fw ml8">{{publicStore.status == 1? '历史' : '最新'}}动环</span>
      </div>
      <div class="flex-ec i21 cursor"></div>
    </div>
    <div class="row bgi22">
      <div :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i" v-show="v.show" :class="typeof(v.key) == 'object'?v.width +' '+ 'mlr5':v.width">{{v.name}}</div>
    </div>
    <div class="table">
      <div class="row" :class="state.actIndex==index? 'active' : index%2 == 1?'bgi23':'bgi18'" v-for="(item, index) in publicStore._public.controlList" :key="index" @click.stop="handleClick('active', item, index)">
        <div v-show="v.show" :class="v.width" :style="{textAlign: v.align}" v-for="(v, i) in state.content" :key="i">
          <span class="i21 cursor mlr5" v-if="typeof(v.key) == 'object'" v-for="(vv, kk, ii) in v.key" :key="ii" @click.stop="handleClick(kk, item)">{{vv}}</span>
          <span v-else-if="v.key=='*'">{{index+1}}</span>
          <span v-else-if="v.type == 'time'">{{item[v.key] == 0?'/':parseTime(item[v.key])}}</span>
          <span v-else-if="v.type == 'find'" :class="find(v.value[0], [v.value[1], item[v.key]], 'color')?find(v.value[0], [v.value[1], item[v.key]], 'color'):''">
            {{find(v.value[0], [v.value[1], item[v.key]], v.value[2])}}
          </span>
          <span v-else>{{isNull(item[v.key]) && v.key!=''? '/' : item[v.key]}}</span>
        </div>
      </div>
      <div v-if="isNull(publicStore._public.controlList)" class="flex-cc hh100 ww100 tc ptb13">没有数据</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
const router = useRouter();
const route = useRoute();
const { proxy }: any = getCurrentInstance();
const publicStore = proxy.publicStore();
let resultList = $ref([
  {value: '0', name: '未操作', color: 'ca'},
  {value: '1', name: '成功', color: 'i21'},
  {value: '2', name: '失败', color: 'i8'},
])
const state = reactive({
  ...publicStore.$state,
  content: [
    { width: 'w50x3', show: true, align: 'left',  key: 'code_name', name: '遥控名称' },
    { width: 'w50x2', show: true, align: 'left',  key: 'action_name', name: '动作名称' },
    { width: 'w50x4', show: true, align: 'left',  key: 'startTime', name: '开始时间', type: 'time' },
    { width: 'w50x1', show: true, align: 'left',  key: 'result', name: '结果', type: 'find', value: [resultList, 'value', 'name'] },
  ]
})

const handleClick = async(remark, val) => {
  console.log('点击')
}

</script>

<style scoped lang="scss">

</style>
